<template>
  <div class="jianpan-box-num-box">
    <div :style="{ aspectRatio: props.ratio }" class="jian" @click="keyD('1')">
      1
    </div>
    <div :style="{ aspectRatio: props.ratio }" class="jian" @click="keyD('2')">
      2
    </div>
    <div :style="{ aspectRatio: props.ratio }" class="jian" @click="keyD('3')">
      3
    </div>
    <div :style="{ aspectRatio: props.ratio }" class="jian" @click="keyD('4')">
      4
    </div>
    <div :style="{ aspectRatio: props.ratio }" class="jian" @click="keyD('5')">
      5
    </div>
    <div :style="{ aspectRatio: props.ratio }" class="jian" @click="keyD('6')">
      6
    </div>
    <div :style="{ aspectRatio: props.ratio }" class="jian" @click="keyD('7')">
      7
    </div>
    <div :style="{ aspectRatio: props.ratio }" class="jian" @click="keyD('8')">
      8
    </div>
    <div :style="{ aspectRatio: props.ratio }" class="jian" @click="keyD('9')">
      9
    </div>
    <div
      :style="{ aspectRatio: props.ratio }"
      class="jian ling"
      @click="keyD('0')"
    >
      0
    </div>
    <div
      :style="{ aspectRatio: props.ratio }"
      class="jian"
      @click="keyD('退格')"
    >
      <span class="iconfont icon-shanchu_delete-two font-size-27"></span>
    </div>
    <div
      :style="{ aspectRatio: props.ratio }"
      class="jian color-primary-bg color-inverse"
      @click="keyD('确定')"
    >
      确定
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  ratio: {
    type: String,
    default: "2 / 1",
  },
 
});
const emit = defineEmits(["update:modelValue", "inputChange", "confirm"]);
function keyD(e) {
  switch (e) {
    case "退格":
      const v = props.modelValue.slice(0, -1);
      emit("update:modelValue", v);
      emit("inputChange", v);
      break;

    case "确定":
      emit("confirm", props.modelValue);
      break;
    default:
      const v1 = props.modelValue + e;
      emit("update:modelValue", v1);
      emit("inputChange", v1);
      break;
  }
}
</script>
<style lang="scss" scoped>
.color-inverse {
  color: $uni-text-color-inverse!important;
}
.jianpan-box-num-box {
  // width: 50%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5rpx;
  .jian {
    width: calc(33.33% - 5rpx);
    aspect-ratio: 2 / 1;
    border: 1px solid $uni-border-color-1;
    border-radius: 6rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18rpx;
    color: $uni-text-color-1;

    &:active {
      background-color: #f5f5f5;
    }
  }
}
</style>
